<template>
	<view class="occupationChoicePage">
		<view class="header">
			<u-navbar title="已知" :leftIcon="firstFlag?'':'arrow-left'" bgColor="transparent"
				titleStyle="color:#FFFFFF;font-weight:bold;" leftIconSize="36" leftIconColor="#FFFFFF" placeholder
				safeAreaInsetTop @leftClick="back"> </u-navbar>
			<view class="card">
				<view class="head">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/occ-icon.png" mode="">
					</image>
					<text class="title"> 职业体系选择 </text>
				</view>
				<view class="content">
					<view style="width: 200px;"> 为给您精准搭建职业体系课程，我们需要对您有更多了解，请您仔细回答以下问题。 </view>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/card.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view style="height: 44rpx;"></view>
		<!-- #endif -->
		<!-- 请选择行业&岗位卡片 -->
		<view class="industry-card">
			<view class="title">
				您想要学习的行业&岗位
			</view>
			<view class="right" @click="toSelectIndustry">
				{{industryInfo?industryInfo.map(v=>v.name).join(',') : '请选择'}}
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/arrow-right.png" mode="">
				</image>
			</view>
		</view>
		<!-- 请选择学习内容卡片 -->
		<view v-if="!loadingContent">
			<view class="content-card" v-for="(sub,index) in SubLabelList" :key="index">
				<view class="title">
					{{sub.subTitle||'针对该岗位您想要学习的内容'}}
				</view>
				<view :class="sub.selectedValue&&sub.selectedValue.length>6?'right-largeText right':'right'"
					@click="toSelectContent(sub)">
					{{sub.selectedValue || '请选择'}}
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/arrow-right.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 提示 -->
		<view class="tips">
			如果你还有其他行业&岗位课程想要了解，可以在“兴趣”中进行添加~
		</view>
		<u-action-sheet :actions="actionList" :title="currentSubLabel&&currentSubLabel.name||'请选择针对该岗位您想要学习的内容'"
			:show="show" :round="24" @select="selected" @close="show=false"></u-action-sheet>
		<view class="sure-button" @click="sure"> 确定 </view>
		<!-- 提交确认弹窗 -->
		<u-modal :show="sureFlag" title="温馨提示" confirmText="我知道了" content='行业&岗位非会员每1年可修改1次/会员每2个月可修改1次'
			closeOnClickOverlay @confirm="sureConfirm" @close="sureFlag=false"></u-modal>
		<show-modal></show-modal>
	</view>
</template>

<script>
	import {
		updateMemberLabel,
		memberLabel,
		getIndustrySubLabel
	} from '@/apis/apis.js'
	import showModal from "@/pages/components/showModal/showModal.vue"
	export default {
		data() {
			return {
				industryInfo: null,
				contentInfo: null,
				show: false,
				sureFlag: false,
				actionList: [{
					name: '小白',
					value: 1
				}, {
					name: '新手',
					value: 2
				}, {
					name: '高手',
					value: 3
				}, {
					name: '大师',
					value: 4
				}],
				// 岗位可选择配置列表
				SubLabelList: [],
				//当前操作子标签
				currentSubLabel: null,
				loadingContent: true,
				firstFlag: null,
				// 透传参数
				labelInterestIds: null,
				labelInterestName: null,
				studyContent: null,

			}
		},
		components: {
			showModal
		},
		onLoad(option) {
			this.firstFlag = option && Boolean(option.first) && option.first !== 'false'
			// console.log(option.first, this.firstFlag)
			// 子页面选择了行业&岗位事件
			uni.$on('industry-selected', params => {
				this.industryInfo = params
				//根据所选岗位获取子标签
				this.getSubLabelList(this.industryInfo, true)
				console.log('子页面选择了行业&岗位事件', params, this.industryInfo)
			})
			this.getInfo()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			// 获取已经选择的行业&岗位信息
			getInfo() {
				memberLabel().then(res => {
					this.memberLabelVo = res.data || res.rows || {}
					this.labelInterestIds = this.memberLabelVo.labelInterestIds
					this.labelInterestName = this.memberLabelVo.labelInterestName
					// 解析参数与重新赋值
					if (this.memberLabelVo.labelPostName) {
						this.industryInfo = this.memberLabelVo.labelPostName.split(',').map((v, index) => ({
							id: (this.memberLabelVo.labelPostIds + '').split(',')[index],
							name: (this.memberLabelVo.labelPostName + '').split(',')[index],
							parentId: (this.memberLabelVo.labelPostOneIds + '').split(',')[index],
							studyContent: JSON.parse(this.memberLabelVo.studyContent),
						}))
						this.contentInfo = {
							id: this.memberLabelVo.studyContentId,
							name: this.memberLabelVo.studyContent
						}
					}
					
					console.log(this.industryInfo)
					//刚进入页面获取的信息中选择得有岗位信息时,根据所选岗位获取子标签
					if (this.industryInfo && this.industryInfo[0].studyContent != null) {
						console.log(this.industryInfo)
						this.getSubLabelList(this.industryInfo, true)
					}
				})
			},
			//根据所选岗位获取子标签
			getSubLabelList(labels, flag) {
				this.loadingContent = true
				let options = {
					labelId: labels.map(v => v.id).join(',')
				}
				getIndustrySubLabel(options).then(response => {
					this.SubLabelList = response.data || response.rows || []
					// 添加一个选择属性
					this.SubLabelList = this.SubLabelList.map((v, index) => ({
						...v,
						selectedValue: flag&&v.child?v.child[0].name: null
					}))
					this.loadingContent = false
					console.log('子标签：', this.SubLabelList)
				})
			},
			toSelectIndustry() {
				if (this.industryInfo) {
					uni.navigateTo({
						url: `/pages/occupation/industryChoice/industryChoice?selected=${JSON.stringify(this.industryInfo)}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/occupation/industryChoice/industryChoice'
					})
				}
			},
			// 选择学习内容
			toSelectContent(sub) {
				// if(!this.industryInfo){
				// 	uni.$u.toast('请先选择行业&岗位信息')
				// 	return
				// }
				// this.actionList = sub.content.replace(/\[|]/g,'').split(',').map(v=>({
				// 	name: v,
				// 	value: v
				// }))
				this.actionList = sub.child;
				this.currentSubLabel = sub
				this.show = true
			},
			getDictData() {
				listDictData({
					dictType: 'user_occupation'
				}).then(response => {
					this.actionList = response.rows || response.data || []
				})
			},
			// 选择 -- 点击actionsheet
			selected(val) {
				this.studyContent = val.id;
				console.log(val)
				// this.contentInfo = val
				this.SubLabelList.forEach(sub => {
					if (this.currentSubLabel.id === sub.id) {
						sub.selectedValue = val.name
					}
				})
				this.show = false
			},
			// 点击确定
			sure() {
				// if(!this.industryInfo){
				// 	uni.$u.toast('请先选择您想要学习的行业&岗位')
				// 	return
				// }
				// if(!this.contentInfo){
				// 	uni.$u.toast('请先选择您想要学习的行业&岗位')
				// 	return
				// }
				if (!this.industryInfo || this.industryInfo.length < 1) {
					uni.$u.toast('请选择行业&岗位')
					return
				}
				this.sureFlag = true
			},
			// 提交
			sureConfirm() {
				this.sureFlag = false
				let labelInterests = [this.otherInterset1, this.otherInterset2, this.otherInterset3]
				//abelPostIds-行业岗位ids,	labelPostName-行业岗位名称,labelPostTime-修改岗位的时间,
				//studyContent-想要学习的内容,tudyContentId-想要学习的内容ID
				labelInterests = labelInterests.filter(v => v)
				let memberLabelVo = {
					labelPostIds: this.industryInfo.map(v => v.id).join(','),
					labelPostName: this.industryInfo.map(v => v.name).join(','),
					labelPostOneIds: this.industryInfo.map(v => v.parentId).join(','),
					labelInterestIds: this.labelInterestIds,
					labelInterestName: this.labelInterestName,
					// labelPostTime: dateFormat(new Date(),"yyyy-MM-dd hh:mm:ss"),	
					// studyContent: this.contentInfo.name,
					// studyContentId: this.contentInfo.value+'',
					// studyContent: `[${this.SubLabelList.map(v=>( `"${v.id}:${v.selectedValue}"`)).join(',')}]`
					studyContent: this.studyContent,
				}
				console.log(memberLabelVo)
				updateMemberLabel(memberLabelVo).then(res => {
					uni.$u.toast('提交成功')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index?type=99'
						})
						// uni.redirectTo({
						// 	url: '/pages/occupation/blankPage/blankPage'
						// })
					}, 800)
					memberLabel().then(res => {
						let t_memberLabelVo = res.data || res.rows || null
						t_memberLabelVo && uni.setStorageSync('local_memberLabelVo', JSON.stringify(
							t_memberLabelVo))
					})
				}).catch(err => {
					uni.showLoading({
						title: ''
					});
					uni.hideLoading()
					this.$showModal({
						title: '提示',
						content: err.msg || '修改失败',
						confirmText: "我知道了", // 确认按钮的文字  
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmColor: '#2979FF',
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.occupationChoicePage {
		margin: 0;
		padding: 0;
		min-height: 100vh;
		background: #EFF1F3;
	}

	.header {
		// height: 340rpx;
		margin-bottom: 40rpx;
		box-sizing: border-box;
		background: linear-gradient(200deg, #1F73F4, #1E8FFB 20%, rgba(31, 115, 244, 0.01));

		.card {
			width: 690rpx;
			height: 280rpx;
			margin: 20rpx auto;
			padding: 20rpx 10rpx 10rpx 20rpx;
			background: #FFFFFF;
			box-shadow: 0 10rpx 15rpx 0 rgba(239, 241, 243, 0.5);
			border-radius: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
				transform: translateY(-4rpx);
			}

			.title {
				font-size: 40rpx;
				font-family: HelloFont;
				font-weight: normal;
				color: #323F64;
				line-height: 52rpx;
				margin-left: 10rpx;
				font-weight: bold;
			}

			.content {
				height: 172rpx;
				margin-top: 20rpx;
				background: linear-gradient(90deg, #F7F7F7, #F7F7F7, #FFFFFF);
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #888888;
				line-height: 46rpx;
				display: flex;
				padding: 20rpx;

				image {
					width: 226rpx;
					height: 226rpx;
					transform: translateY(-64rpx) translateX(10rpx);
				}
			}
		}
	}

	.industry-card,
	.content-card {
		width: calc(100% - 40rpx);
		box-sizing: border-box;
		min-height: 114rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 15rpx 0px rgba(239, 241, 243, 0.5);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #888888;
		line-height: 46rpx;

		.title {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #1F1F1F;
			max-width: calc(100vw - 340rpx);
		}

		image {
			width: 36rpx;
			height: 36rpx;
			vertical-align: middle;
			transform: translateY(8rpx);
			// #ifdef APP-PLUS
			transform: translateY(4rpx);
			// #endif
			margin-left: 20rpx;
			float: right;
		}

		.right-largeText {
			width: 100%;
			text-align: right;
		}
	}

	.tips {
		width: 690rpx;
		margin: auto;
		margin-top: 60rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #B1B1B1;
		line-height: 46rpx;
		text-indent: 2em;
	}

	.sure-button {
		width: 690rpx;
		margin: auto;
		margin-top: 150rpx;
		height: 90rpx;
		background: #194FC9;
		border-radius: 45rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
	}

	/deep/ .u-action-sheet__item-wrap {
		max-height: calc(100vh - 200rpx);
		overflow-y: auto;
	}
</style>
